<template>
  <!-- 首页 -->
  <div class="index">
    <!-- <MyHead title="湖北高校防艾活动" :noback="true" :bg="true"></MyHead> -->
    <div class="bannar-box">
      <div class="bg-box"></div>
      <div class="banner flexc">
        <van-swipe
          :autoplay="3000"
          indicator-color="white"
          style="width: 100%; height: 200px"
        >
          <van-swipe-item v-for="(item, index) in bannerImg" :key="index">
            <img
              v-lazy="sourceURL + item.image_url"
              alt=""
              srcset=""
              @click="goBanner(item)"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="btn-box flexc">
      <van-button round type="info" color="#FBE3E3" @click="goHotEvents"
        >更多热门活动</van-button
      >
    </div>
    <!-- 地区活动 -->
    <div class="district-box" >
      <div class="title flexb">
        <div class="title-left">地区活动</div>
        <div class="title-right" @click="goDistrict">查看更多</div>
      </div>
      <div class="content-wrapper" v-if="this.districtList.length > 0">
        <div class="content-box">
          <div
            class="item-box"
            v-for="(item, index) in districtList"
            :key="index"
            @click.stop.prevent="goDistrictItem(item)"
          >
            <div class="img-box">
              <img
                v-if="item.theme_image"
                :src="sourceURL + item.theme_image"
                alt=""
              />
              <van-image width="100%" v-else>
                <template v-slot:error></template>
              </van-image>
              <van-tag type="primary" class="tags">{{
                item.depart_code_text
              }}</van-tag>
            </div>

            <div class="title">{{ item.title }}</div>
            <div class="description van-multi-ellipsis--l2">
              {{ item.description }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 高校排行榜 -->
    <div class="leaderboard-box" @click="goranking"></div>
    <!-- 高校活动 -->
    <div class="school-box" >
      <div class="title-box flexb">
        <div class="title-left">高校活动</div>
        <div class="title-righ" @click="goSchoolList">查看更多</div>
      </div>
      <div class="list-box" v-if="this.universitiesList.length > 0">
        <div
          class="item-box"
          v-for="(item, index) in universitiesList"
          :key="index"
          @click="goSchoolItem(item)"
        >
          <div class="img-box" v-if="item.theme_image">
            <img  :src="sourceURL + item.theme_image" alt="" width="100%" />
            
          </div>
          <div class="img-box" v-else> 
            <van-image width="100%" >
              <template v-slot:error></template>
            </van-image>
          </div>
          <div class="right-box">
            <div class="title">{{ item.title }}</div>
            <div class="type-style flexc">{{ item.cate_id_text }}</div>
            <div class="unit-style">活动单位：{{ item.depart_code_text }}</div>
          </div>
        </div>
      </div>
    </div>
    <MyTab></MyTab>
  </div>
</template>
    
<script>
import { sourceURL } from "../../api/request";
export default {
  data() {
    return {
      bannerImg: [],
      districtList: [], //地区活动
      universitiesList: [],
      activeType: null,
      code: "", //code码
      appid: "",
      wxAppid: "",
      openid: $.cookie("openid"),
      useInfo: {},
      link: "",
      q: "",
      page_url: "",
    };
  },
  computed: {},
  methods: {
    /*判断用户进入页面时是否有注册信息*/
    // 第一步
    // 获取微信AppID（测试-田）
    async getWxAppid() {
      let res = await this.$ajax.WechatParam();
      if (res.code == 1) {
        this.wxAppid = res.data.appid; //wxID
        // appID存储
        var expiration = new Date();
        expiration.setTime(expiration.getTime() + 1.5 * 60 * 60 * 1000); // 设置1个半小时
        $.cookie("appid", res.data.appid, { expires: expiration });
        this.getOpenid(); //正式
      } else {
        this.$toast.fail(res.msg, "msg---");
      }
    },

    // 第二步转码
    /*url 转码(获取地址栏的参数)*/
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);

      return null;
    },

    /*测试获取openid*/
    async testStart() {
      this.openid = "wx001";

      let res = await this.$ajax.getStartTest({
        code: this.openid,
      });
      if (res.code == 1) {
        $.cookie("openid", "wx001", { expires: 7 }); // 默认天
      } else {
        this.$toast.fail(res.msg);
      }
    },

    /*正式openid*/
    async getOpenid() {
      if (!this.wxAppid || this.wxAppid == undefined) {
        Toast.fail("缺少参数");
        return false;
      }
      var scope = "snsapi_base"; //snsapi_userinfo；snsapi_base
      var jumpUrl ="https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + this.wxAppid + "&redirect_uri=" + location.href.split("#")[0] +"&response_type=code&scope=" +  scope +"&state=STATE#wechat_redirect";
       
      this.code = this.getUrlParam("code");

      if (!this.code) {
        window.location = jumpUrl;
        return;
      } else {
        let res = await this.$ajax.weChatLogin({
          code: this.code,
          scope: scope,
        });
        if (res.code == 1) {
          var expiration = new Date();
          expiration.setTime(expiration.getTime() + 1.5 * 60 * 60 * 1000); // 设置1个半小时
          $.cookie("openid", res.data.openid, { expires: expiration });
          this.openid = res.data.openid;
          // this.getUserInfo();//用户信息
          // 跳转扫码页面
          var reurl = localStorage.getItem("redirect_uri");
          if (reurl) {
            localStorage.removeItem("redirect_uri"); // 跳转后移除
            window.location =
              window.location.origin + window.location.pathname + "#" + reurl;

            return;
          }
          this.$nextTick(() => {
            // 第一次请求
            // this.todoGetSign();  // 获取jssdk授权
            this.getActSigninList(); //地区
            this.getUniversitiesList(); //学校活动
          });
        } 
      }
    },

    /*更多热门活动*/
    async goHotEvents() {
      // this.infoShow = true;
      this.activeType = 1;
       
      this.changeActype(1)
      this.$router.push({
        name: "activityList",
        query: { activeType: this.activeType },
      });
    },
    /*高校排行榜*/
    goranking() {
      this.$router.push({ name: "rankingPage" });
    },
    /*地区活动（查看更多）*/
    goDistrict() {
      this.activeType = 2;
      this.changeActype(2)
      this.$router.push({
        name: "activityList",
        query: { activeType: this.activeType },
      });
    },
    /*地区活动（列表）*/
    async getActSigninList() {
      let res = await this.$ajax.actSigninList({
        openid: this.openid,
        level: "0",
      });
      if (res.code == 1) {
        this.districtList = res.data;
      }
    },
    /*地区活动（单个）*/
    goDistrictItem(item) {
      var s = item.depart_code + "-" + item.id;
      // this.$router.push({ name: "eventDetails" ,query:{s:s}});
      // this.$router.replace({ name: "eventDetails" ,query:{s:s}});
      window.location.href =
        window.location.origin +
        window.location.pathname +
        "#/eventDetails?s=" +
        s;
    },
    /*高校活动（列表）*/
    async getUniversitiesList() {
      let res = await this.$ajax.actSigninList({
        openid: this.openid,
        level: "4",
      });
      if (res.code == 1) {
        this.universitiesList = res.data;
      }
    },
    /*高校活动（查看更多）*/
    goSchoolList() {
      this.activeType = 3;
      this.changeActype(3)
      this.$router.push({
        name: "activityList",
        query: { activeType: this.activeType },
      });
    },
    /*高校活动（单个）*/
    goSchoolItem(item) {
      var s = item.depart_code + "-" + item.id;
      this.$router.push({ name: "eventDetails", query: { s: s } });
    },
    /*关闭*/
    close() {
      this.infoShow = false;
    },
    /*确定提交*/
    async onSubmit() {
      if (this.form.depart_code && this.form.grade && this.form.gender) {
        var date = new Date(this.form.grade);
        this.form.grade = date.getFullYear(date);
        let res = await this.$ajax.Register({
          depart_code: this.form.depart_code,
          grade: this.form.grade,
          gender: this.form.gender,
          openid: this.openid,
        });
        if (res.code == 1) {
          this.$toast(res.msg);
        } else {
          this.$toast(res.msg);
        }
      } else {
        this.$toast("请输入完整的信息");
      }
    },

    /*轮播图*/
    async getcarousel() {
      let res = await this.$ajax.carousel({
        openid: this.openid,
      });
      if (res.code == 1) {
        this.bannerImg = res.data;
      }
    },
    /*轮播图事件*/
    goBanner(item) {
      var index = item.link.indexOf("?");
      this.link = item.link.substring(0, index);
      var indexs = item.link.indexOf("=");
      this.q = item.link.substring(indexs + 1, item.link.length);
      this.$router.push({ name: this.link, query: { q: this.q } });
    },
    /*获取jsSdk*/
    async todoGetSign() {
      let res = await this.$ajax.getJsSdkSign({
        openid: $.cookie("openid"),
      });

      if (res.code == 1) {
        wx.config({
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.data.appid, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ["scanQRCode", "chooseImage"], // 必填，需要使用的JS接口列表
        });
      }
    },
     /*获取用户信息*/
     async getUserInfo(){
      let res = await this.$ajax.getPersoninfo({
        openid:this.openid
      })
      if (res.code == 1) {
        this.changeUserInfo(res.data)
      }else{
        this.changeUserInfo(null);
      }
    } 
   
  },
  mounted() {
    // this.testStart(); //现在用这个测试接口
    // 判断是否有openid
    if (!this.openid || this.openid == undefined) {
      // 没有 openid 需要重新请求
      // this.testStart(); // 测试
      this.getWxAppid(); // 正式用这个接口
    } else {
      // 有 openid 直接请求接口
      // this.todoGetSign();  // 获取jssdk授权
      this.getActSigninList(); //地区
      this.getUniversitiesList(); //学校活动

    }

    this.getcarousel(); //轮播图
   
  },
};
</script>
    
<style lang="scss" scoped>
.index {
  width: 100%;
  background-color: #ffffff;
  min-height: 100vh;
  height: 100%;
  padding-bottom: 40px;

  .bannar-box {
    // width: 100%;
    background-color: rgba(226, 27, 27, 1);
    background: linear-gradient(to bottom right, #b71c1c, #f44336);

    .bg-box {
      height: 200px;
      line-height: 20px;
      background: linear-gradient(to bottom right, #b71c1c, #f44336);
      text-align: center;

      .van-search {
        background: linear-gradient(to bottom right, #b71c1c, #f44336);

        ::v-deep .van-icon {
          color: red !important;
        }

        .van-field__left-icon .van-icon,
        .van-field__right-icon .van-icon {
          color: red !important;
        }

        .van-field__left-icon .van-icon {
          color: #b71c1c !important;
        }
      }
    }

    .banner {
      width: 90%;
      height: 240px;
      position: absolute;
      top: 50px;
      margin: 0px 20px;
      overflow: hidden;

      /* 隐藏超出容器的部分 */
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* 等比例缩放并裁剪，保持图片不变形 */
      }
    }
  }

  .btn-box {
    margin-top: 100px;

    .van-button {
      width: 90%;
      line-height: 20px;
      color: red !important;
      background: rgba(251, 227, 227, 1);
      text-align: center;
      border: none;
      font-size: 14px;
      font-weight: bold;
    }
  }

  //   地区活动
  .district-box {
    margin-top: 12px;
    padding: 10px;

    .title {
      .title-left {
        color: rgba(16, 16, 16, 1);
        font-size: 16px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
        font-weight: bold;
      }

      .title-right {
        color: rgba(153, 153, 153, 1);
        font-size: 12px;
        text-align: left;
        font-family: PingFangSC-regular;
      }
    }
    .content-wrapper {
      width: 100%;
      margin-top: 10px;
      overflow: hidden;
    }
    .content-box {
      width: 100%;
      display: flex;
      /*使用Flex布局*/
      overflow-x: auto;
      /*设置滚动条*/
      -webkit-overflow-scrolling: touch;
      /*增强滚动体验*/
      transform: translate3d(0, 0, 0);
      /*开启GPU加速*/

      .item-box {
        width: 160px;

        margin-right: 10px;
        flex-shrink: 0;
        flex: 0 0 auto;
        /*禁止自动缩放*/
        transform: translate3d(0, 0, 0);
        padding-bottom: 5px;

        /*开启GPU加速*/
        .img-box {
          max-width: 100%;
          height: 100px;
          // box-sizing: content-box;
          display: flex;
          justify-content: center;
          align-content: center;
          overflow: hidden;

          /* 隐藏超出容器的部分 */
          position: relative;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* 等比例缩放并裁剪，保持图片不变形 */
          }

          .tags {
            height: 24px;
            border-radius: 0px 4px 4px 1px;
            background-color: rgba(164, 173, 179, 1);
            color: rgba(255, 255, 255, 1);
            font-size: 12px;
            text-align: center;
            font-family: Microsoft Yahei;
            position: absolute;
            top: 0px;
            left: 0px;
          }
        }

        .title {
          color: rgba(16, 16, 16, 1);
          font-size: 14px;
          text-align: left;
          font-family: SourceHanSansSC-regular;
          padding: 0px 5px;
          margin-top: 5px;
        }

        .description {
          color: rgba(16, 16, 16, 1);
          font-size: 12px;
          text-align: left;
          font-family: PingFangSC-regular;
          padding: 5px 5px;
          height: 30px;
        }
      }
    }
  }

  //   高校排行榜
  .leaderboard-box {
    height: 100px;
    // width: 100%;
    background-image: url("../../assets/images/index-img-gxphb.png");
    background-position: center center;
    background-size: 100% 100%;
    border-radius: 40px;
    color: rgba(255, 255, 255, 1);
    font-size: 28px;
    text-align: left;
    font-family: Arial;
    margin: 10px;
    position: relative;
  }

  //   高校活动
  .school-box {
    padding: 10px;

    .title-box {

      .title-left {
        color: rgba(16, 16, 16, 1);
        font-size: 16px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
        font-weight: bold;
      }

      .title-righ {
        color: rgba(153, 153, 153, 1) !important;
        font-size: 12px;
        text-align: left;
        font-family: PingFangSC-regular;
      }
    }

    .list-box {
      margin-top: 15px;

      .item-box {
        display: flex;
        width: 100%;
        height: 93px;
        margin-bottom: 16px;

        .img-box {
          width: 100px ;
          height: 93px;
          overflow: hidden;
          flex-shrink:0;

          /* 隐藏超出容器的部分 */
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background-size: cover;
            /* 等比例缩放并裁剪，保持图片不变形 */
          }
        }

        .right-box {
          margin-left: 15px;

          .title {
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: left;
            font-family: SourceHanSansSC-regular;
            font-weight: bold;
          }

          .type-style {
            width: 54px;
            height: 24px;
            border-radius: 4px;
            background-color: #ffebee;
            border: 1px solid rgb(253, 68, 68);
            color: rgba(226, 27, 27, 1);
            font-size: 12px;
            font-family: Microsoft Yahei;
            margin: 7px 0px;
          }

          .unit-style {
            color: rgba(153, 153, 153, 1);
            font-size: 12px;
            text-align: left;
            font-family: PingFangSC-regular;
          }
        }
      }
    }
  }
  // 弹框样式
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .block {
      width: 312px;
      height: 280px;
      background-color: #fff;
      border-radius: 10px;
      padding: 10px;
      .title {
        font-size: 20px;
      }

      .toast-style {
        font-size: 24px;
        margin: 20px 10px;
      }
      .btn-style {
        margin-top: 50px;
      }
    }
  }
  .form-style {
    margin-top: 20px;
    ::v-deep .el-form-item__content {
      margin-left: 0px !important;
      .el-select {
        width: 95%;
      }
    }
  }
  .el-date-editor.el-input {
    width: 95%;
  }
}
</style>